<template>
    <!--
   1、数组翻转
   2、数组截取
   3、数组更新
   4、数组过滤
   -->
    <ul>
        <li v-for=" item in arr" :key="item">
            {{ item }}
        </li>
    </ul>
    <button @click="revBtn">数组翻转</button> &nbsp;
    <button @click="sliceBtn">数组截取</button> &nbsp;
    <button @click="updateBtn">数组更新</button> &nbsp;
    <button @click="filterBtn">数组过滤</button> &nbsp;

</template>

<script setup>
import { ref } from 'vue'
const arr = ref([1, 2, 3, 4, 5, 6])
const arr2 = ref([7,8,9,10])

const revBtn = () => { 
    // 是可以直接对数组进行更新的
  arr.value = arr.value.reverse()
}
const sliceBtn = () => { 
    // 数组截取 没有进行数组原地更新，所以需要重新赋值

    console.log(arr.value.slice(0, 3));
    arr.value = arr.value.slice(0, 3)
   
}

const updateBtn = () => { 
    // 数组更新 如果单独一个 可以直接更新 如果是一个新的数组 那么需要重新赋值

    // arr.value[5] = 7
    arr.value = arr.value.concat(arr2.value)

}
const filterBtn = () => { 
    // 数组过滤 没有进行原地更新 需要重新赋值
    //过滤简写的方式：
    console.log(arr.value.filter(item => item < 5));
    // 过滤完整写法：
  let filterArr =  arr.value.filter((item) => {
        return item < 5
     })
    console.log(filterArr);
     arr.value = filterArr
    // 基于函数的完整写法
    // value 当前数组的值  index 当前数组的索引 arr 当前数组本身

   let funArr= arr.value.filter(function (value, index, arr) { 
        console.log(value, index, arr);
        
        return value < 5
   })
    console.log(funArr);
    
    
}

</script>

<style lang="scss" scoped>

</style>